<template>
  <div class="gl-box">
    <div class="gl-item" v-for="(item, index) in list" :key="index">
      <div class="top-info">
        <div class="label-left">
          <span class="text">{{ item.title }}</span>
        </div>
        <div class="value-content">{{ item.num || 0 }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  allData: Object,
});

let list = ref([
  {
    title: "所有任务",
    num: "0",
  },
  {
    title: "已处理",
    num: "0",
  },
  {
    title: "未处理",
    num: "0",
  },
  // {
  //   title: "平均处置时长",
  //   num: "0小时",
  // },
  // {
  //   title: "完成率",
  //   num: "0%",
  // },
  // {
  //   title: "超时率",
  //   num: "0%",
  // },
]);

watch(
  () => props.allData,
  (newval) => {
    if (newval.eventCnt) {
      list.value[0].num = newval.eventCnt;
      list.value[1].num = newval.handleCnt;
      list.value[2].num = newval.eventCnt - newval.handleCnt;
      // list.value[3].num = newval.handleDuration;
      // list.value[4].num = newval.handleRate + "%";
      // list.value[5].num = newval.recurrenceCntRate + "%";
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.gl-box {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .gl-item {
    width: 15%;
    height: 100px;
    padding: 29px 18px 20px 19px;
    &:nth-child(1) {
      background: url("../../../assets/images/gl1.png");
      background-size: 100% 100%;
    }
    &:nth-child(2) {
      background: url("../../../assets/images/gl2.png");
      background-size: 100% 100%;
    }
    &:nth-child(3) {
      background: url("../../../assets/images/gl3.png");
      background-size: 100% 100%;
    }
    &:nth-child(4) {
      background: url("../../../assets/images/gl4.png");
      background-size: 100% 100%;
    }
    &:nth-child(5) {
      background: url("../../../assets/images/gl5.png");
      background-size: 100% 100%;
    }
    &:nth-child(6) {
      background: url("../../../assets/images/gl1.png");
      background-size: 100% 100%;
    }
    .top-info {
      display: flex;
      align-items: top;
      justify-content: space-between;
      .label-left {
        display: flex;
        align-items: center;
        .labelimg {
          width: 30px;
          height: 30px;
          margin-right: 14px;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
          line-height: 22px;
          letter-spacing: 1px;
          text-align: left;
          font-style: normal;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .value-content {
        font-family: YouSheBiaoTiHei;
        font-size: 30px;
        color: #ffffff;
        line-height: 39px;
        letter-spacing: 3px;
        text-align: left;
        font-style: normal;
        white-space: nowrap;
      }
    }
  }
}
</style>
